<template>
  <div id="register">
    <!-- 导航栏 -->
    <nav-bar title="用户注册" leftText="返回登陆"/>
    <!-- logo面板 -->
    <logo-head text="用户注册" />
    <!-- 注册表单 -->
    <van-form @submit="onSubmit" class="register_form">
      <van-field
        v-model="registerForm.username"
        name="username"
        label="用户名"
        placeholder="请输入用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"/>
      <van-field
        v-model="registerForm.password"
        type="password"
        name="password"
        label="密码"
        placeholder="请输入密码"
        :rules="[{ required: true, message: '请填写密码' }]"/>
      <van-field
        v-model="registerForm.repeat_password"
        type="password"
        name="repeat_password"
        label="确认密码"
        placeholder="请确认密码"
        :rules="[{ required: true, message: '请输入确认密码',trigger:'onBlur' },{validator:checkPasswordValidator,message:'两次输入的密码不一致'}]"/>
        <van-field
          v-model="registerForm.phone"
          type="number"
          name="phone"
          label="电话号码"
          placeholder="请输入电话号码"
          :rules="[{required:true,message:'请输入电话号码'},{validator:phoneValidator,message:'电话号码格式不正确'}]"
        />
      <div style="margin: 16px;">
        <van-button  block type="info" native-type="submit">
          我 要 注 册
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import LogoHeadVue from '../components/LogoHead.vue'
import NavBarVue from '../components/NavBar.vue'
export default {
  name: 'register',
  components: {
    'logo-head': LogoHeadVue,
    'nav-bar': NavBarVue
  },
  data () {
    return {
      // 注册表单
      registerForm: {
        username: '',
        password: '',
        repeat_password: '',
        phone: ''
      }
    }
  },
  methods: {
    /**
     * 业务： 注册
     */
    register () {
      this.$toast({ type: 'loading', message: '注册中...', duration: 10000, forbidClick: true })
    },
    // 表单验证通过并提交
    onSubmit (value) {
      console.log(value)
      this.register()
    },
    // 校验两次密码是否一致
    checkPasswordValidator (val) {
      return val === this.registerForm.password
    },
    // 电话号码校验器
    phoneValidator (val) {
      return /^1[3-9]\d{9}$/.test(val)
    }
  },
  created () {
    // this.$toast.fail('hello')
    // this.$toast.success('hello')

  }
}
</script>

<style lang="less" scoped>
#register{
  display:flex;
  flex-direction: column;
  align-items: center;
  width:100%;
  height:100%;
  box-sizing: border-box;

  .register_form{
    width:100%;
     box-sizing: border-box;
  }
}
</style>
